<template>
  <div class="home">
    <el-row class="mb-4">
      <el-button :onclick="ExportXlsx">下载模板</el-button>
      <el-button :onclick="uploadFileServer">上传文件到服务器进行导入</el-button>
      <el-button type="primary" :onclick="uploadDataServer">
        读取本地文件数据导入到服务器<el-icon class="el-icon--right">
          <Upload />
        </el-icon>
      </el-button>
    </el-row>
    <el-table :data="state.tableData.data">
      <el-table-column v-for="item in state.colunm" :prop="item.key" :key="item.key" :label="item.lable">
      </el-table-column>
    </el-table>
    <div class='block flex justify-end' v-if='state.tableData.total > 0'>
      <el-pagination v-model:currentPage="state.searchInput.PageIndex" v-model:page-size="state.searchInput.PageSize"
        :page-sizes="[10, 50, 200, 1000]" layout="total, sizes, prev, pager, next, jumper" @size-change="getData"
        @current-change="getData" :total="state.tableData.total" />
    </div>
  </div>
  <FileUpload ref="fileUpload" @childClick="fileUploadchildClick" accept=".xlsx" title="上传文件"></FileUpload>
  <DataUpload ref="dataUpload" @childClick="dataUploadchildClick" accept=".xlsx" title="上传数据"></DataUpload>
</template>

<script lang="ts"  >
import { defineComponent, ref, reactive, Ref, onMounted } from 'vue';
import FileUpload from '@/components/FileUpload.vue'; // @ is an alias to /src
import DataUpload from '@/components/DataUpload.vue';
import axios from 'axios';
import * as XLSX from 'xlsx'
import { ElMessage } from 'element-plus'

export default defineComponent({
  components: {
    FileUpload,
    DataUpload
  },
  setup() {
    onMounted(async () => {
      getData();
    });
    const state = reactive({
      tableData: { data: [], total: 0 },
      searchInput: { PageIndex: 1, PageSize: 10 },
      colunm: [{ lable: '名称', key: 'name' }, { lable: '地址', key: 'address' }]
    });
    const fileUpload = ref(null) as Ref;
    const dataUpload = ref(null) as Ref;
    const uploadFileServer = () => {
      // 调用子组件的方法
      fileUpload.value.childMethod();
    }
    const uploadDataServer = () => {
      dataUpload.value.childMethod(state.colunm);
    }
    const getData = () => {
      axios.get('/Company', { params: state.searchInput }).then(function (response) {
        state.tableData = response.data;
      })
    }
    const fileUploadchildClick = (e) => {
      axios.put('/Company', {
        filePath: e.filePath,
      }).then(function (response) {
        if (response.status == 200) {
          ElMessage.success(response.data);
          fileUpload.value.cancel();
          getData();
        } else {
          ElMessage.error(response.data)
        }
      })
    }
    const dataUploadchildClick = (data) => {
      axios.post('/Company', data)
        .then(function (response) {
          if (response.status == 200) {
            ElMessage.success(response.data);
            dataUpload.value.cancel();
            getData();
          } else {
            ElMessage.error(response.data)
          }
        })
    }
    const ExportXlsx = () => {
      // 创建工作表
      const data = XLSX.utils.json_to_sheet([{
        名称: '',
        地址: '',
      }])
      // 创建工作簿
      const tHeader = XLSX.utils.book_new()
      // 将工作表放入工作簿中
      XLSX.utils.book_append_sheet(tHeader, data, 'data')
      // 生成文件并下载
      XLSX.writeFile(tHeader, 'test.xlsx')
    }
    return {
      state,
      fileUpload,
      dataUpload,
      uploadFileServer,
      uploadDataServer,
      fileUploadchildClick,
      dataUploadchildClick,
      onMounted,
      getData,
      ExportXlsx
    }
  }
})

</script>
<style scoped>
</style>